import React, { useState } from 'react';
import { Table, Form, Input, Select, Button, Pagination, Space } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
type FormValues = {
    title: string;
    category: string;
    creator: string;
};

const categories = ['category1', 'category2', 'category3'];

const dataSource = [
    {
        key: '1',
        title: 'Title1',
        category: 'category1',
        creator: 'John Doe',
        date: '2022-02-22',
    },
    {
        key: '2',
        title: 'Title2',
        category: 'category2',
        creator: 'Jane Smith',
        date: '2022-02-23',
    },
];

const columns = [
    {
        title: '序号',
        dataIndex: 'key',
        key: 'key',
    },
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '分类',
        dataIndex: 'category',
        key: 'category',
    },
    {
        title: '创建人',
        dataIndex: 'creator',
        key: 'creator',
    },
    {
        title: '创建时间',
        dataIndex: 'date',
        key: 'date',
    },
    {
        title: '操作',
        key: 'action',
        render: (_: any, record: { key: React.Key }) => (
            <Space>
                <Button type="link" icon={<EditOutlined />} onClick={() => { }}>
                    编辑
                </Button>
                <Button type="link" icon={<DeleteOutlined />} onClick={() => { }}>
                    删除
                </Button>
                <Button type="link" icon={<EyeOutlined />} onClick={() => { }}>
                    详情
                </Button>
            </Space>
        ),
    },
];


const list: React.FC = () => {

    const [form] = Form.useForm<FormValues>();
    const [currentPage, setCurrentPage] = useState(1);

    const handleSearch = (values: FormValues) => {
        console.log('Search:', values);
    };

    const handleReset = () => {
        form.resetFields();
    };

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };


    return (
        <div><Form layout="inline" initialValues={{ category: 'All' }} form={form} onFinish={handleSearch}>
            <Form.Item label="标题" name="title">
                <Input placeholder="请输入标题" />
            </Form.Item>
            <Form.Item label="分类" name="category">
                <Select>
                    <Select.Option value="All">全部分类</Select.Option>
                    {categories.map((category) => (
                        <Select.Option key={category} value={category}>
                            {category}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>
            <Form.Item label="创建人" name="creator">
                <Input placeholder="请输入创建人" />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                    重置
                </Button>
            </Form.Item>
        </Form>
            <Table columns={columns} dataSource={dataSource} pagination={false} />
            <Pagination
                style={{ marginTop: 16, textAlign: 'right' }}
                current={currentPage}
                total={50}
                pageSize={10}
                onChange={handlePageChange}
            /></div>
    )
}

export default list